<template>

  <!-- 查询条件 -->
  <div>
      功能名称：
      <el-cascader v-model="value" :props="props" :options="options2" @change="handleChange2" />
      &emsp;
      <el-button type="success" :icon="Plus" @click="AddContest">新增功能</el-button>
  </div>

  <!-- 列表显示 -->
  <el-table
      :header-cell-style="{ height: '100px', fontSize: '15px', color: 'black' }"
      :data="tableData" border style="width: 100%">
      <el-table-column prop="permissionsName" label="功能" />
      <el-table-column label="操作">
          <template #default="scope">
              浏览、增加、删除、编辑
          </template>
      </el-table-column>
      <el-table-column prop="roleName" label="角色" />
      <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
              <el-button link type="primary" size="small" @click="">
                  删除
              </el-button>
          </template>
      </el-table-column>
  </el-table>
  <el-pagination v-model:current-page="page.pageIndex" v-model:page-size="page.pageSize" :page-sizes="[5, 10, 15, 20]"
      layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" />
  <!-- 对话框新增 -->
  <el-dialog class="button-container" v-model="dialogFormVisible" title="权限分配" width="500">

      <div>
          <table>
              <tr>
                  <td>功能</td>
                  <td>操作</td>
              </tr>
              <tr>
                  <td>{{ page.permissionName }}</td>
                  <td>
                      <el-checkbox v-model="form.canView" label=" 浏览" size="large" />
                      <el-checkbox v-model="form.canAdd" label="增加" size="large" />
                      <el-checkbox v-model="form.canEdit" label="删除" size="large" />
                      <el-checkbox v-model="form.canDelete" label="修改" size="large" />
                  </td>
              </tr>
          </table>
      </div>
      <el-table :data="roles" border style="width: 100%;height: 200px" @selection-change="handleSelectionChange">
          <el-table-column type="selection" label="全选" width="55" />
          <el-table-column prop="roleName" label="角色名称" />
      </el-table>
      <el-button type="success" :icon="SuccessFilled" @click="Sumlit" style="margin-left: 200px;">保存</el-button>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  Setting,
  SuccessFilled,
  Close,
} from '@element-plus/icons-vue'
import { reactive, ref, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage, ElMessageBox } from 'element-plus';
import type { ComponentSize, FormInstance, FormRules } from 'element-plus';
//调用持久化
import { useCounterStore } from '@/stores/counter';
const counterStore = useCounterStore();
const route = useRoute();
const router = useRouter();
onMounted(() => {
  GetPermission();
  getRoles();
  getOptions2()
})

const cpiurls = import.meta.env.VITE_APP_API_URL_RBACCommon;//5214
const apiurls = import.meta.env.VITE_APP_API_URL_RBACWrite;//5268
const page = reactive({

  permissionName: '',
  pageIndex: 1,
  pageSize: 5,
  pageCount: 1,
  totalCount: 1,
});
const changeCeshi = ref([]);
const handleSizeChange = (val: any) => {
  page.pageSize = val;
  GetPermission()
};

const handleCurrentChange = (val: any) => {
  page.pageIndex = val;
  GetPermission()
};

const dialogFormVisible = ref(false);

const form = reactive({
  "rolesIds": [],
  "permissionsId": 0,
  "canAdd": true,
  "canEdit": true,
  "canDelete": true,
  canView: true,
});
const multipleSelection = ref<any>([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
  form.rolesIds = multipleSelection.value.map((item: any) => item.rolesId)
  console.log(multipleSelection.value)
  console.log(form.rolesIds)
}

const AddContest = () => {
  console.log(page.permissionName.trim())
  if (page.permissionName.trim() === '') {
      ElMessage.error("请选择功能")
      return;
  }
  else {
      dialogFormVisible.value = true
  }
}

const tableData = ref([]);
const tableData2 = ref([]);
const GetPermission = () => {
  axios.get(cpiurls+'/api/RBACs/PermissionList', {
      params: {
          pageIndex: page.pageIndex,
          pageSize: page.pageSize
      }
  }).then((res) => {

      if (res.data.code == 4) {
          tableData.value = res.data.data
          console.log(res.data.messege)
          page.pageCount = res.data.pageCount
          page.totalCount = res.data.totalCount
      }
      else {
          ElMessage.error(res.data.messege)
      }
  })
}
//工呢级联
const value = ref([])

const props = {
  expandTrigger: 'hover' as const,

}

const handleChange2 = (value: any) => {
  console.log(value)
  form.permissionsId = value[value.length - 1]
  // 获取对应选中的中文标签
  let label = '';
  let options = options2.value;  // 从根级开始查找
  console.log(options)
  value.forEach((v: any) => {
      // 遍历当前级别的选项
      const found: any = options.find((option: any) => option.value === v);
      if (found) {
          label += found.label + ',';  // 拼接中文标签
          options = found.children || [];  // 下一级的选项 
      }
  });
  let n = label.trim().split(',').length - 2
  console.log(label.trim().split(','))
  console.log(label.trim().split(',')[n]);  // 输出完整的中文标签
  console.log(form.permissionsId)
  page.permissionName = label.trim().split(',')[n]//设置中文标签
}
const options2 = ref([])
const getOptions2 = () => {
  axios.get(cpiurls+"/api/RBACs/GetPermissionCascaderList").then((res) => {
      console.log(res.data.data)
      options2.value = res.data.data
  })
}

//#region 获取角色下拉框数据
const roles = ref<any>([]);
const getRoles = async () => {
  axios.get(apiurls+"/api/RBACs/RolesList", {
      params: {
          RoleName: "",
          pageIndex: 1,
          pageSize: 1000
      }
  }).then(res => {
      roles.value = res.data.data;
  })
}
//保存
const Sumlit = () => {
  var obj = {
      "permissionsId": form.permissionsId,
      "rolesIds": form.rolesIds
  }
  axios.post(apiurls+"/api/RBACs/PermissionRolesCreate", obj).then((res) => {
      console.log(res.data)
      if (res.data.code == 0) {
          ElMessage.success(res.data.messege)
      }
      else {
          ElMessage.error(res.data.messege)
      }

  })
}





</script>

<style scoped>
.button-container {
  display: flex;
  justify-content: center;
  /* 水平居中 */
  align-items: center;
  /* 垂直居中 */
  height: 100vh;
  /* 可选，设置容器的高度 */
}
</style>
